<template>
	<view class="minebigbox">
		<view class="myhome">
			<!-- 登录 -->
			<view class="myhome-logon">
				<view class="logon-name-image">
					<image src="../../static/a.jpg" mode=""></image>
					<view class="logon-name">
						{{name}}
					</view>
				</view>
				<view class="tologon">
					去登录>
				</view>



			</view>
			<!-- 我的收藏挂号记录 -->
			<view class="mylike">
				<view class="mylike-item" @click="tomylike">
					<image src="../../static/b.jpg" mode=""></image>
					<text>我的收藏</text>
				</view>
				<view class="mylike-item" @click="toregist">
					<image
						src="https://static.med.gzhc365.com/fss/publicfile/311b5a25b81a0ffecba220d847fc0efc27b1edbb13da529beaf2378d1258596d.png"
						mode=""></image>
					<text>挂号记录</text>

				</view>
				<view class="mylike-item" @click="topayment">
					<image
						src="https://static.med.gzhc365.com/fss/publicfile/0867e6faa1cd76773cb90b909da305791fa38466f629e37c94aba2004095e879.png"
						mode=""></image>
					<text>缴费记录</text>

				</view>
			</view>


			<!-- 文字区域 -->
			<view class="text-option">
				<view class="text-one">
					<text>我的电子社保卡</text>
					<text> > </text>
				</view>
				<view class="text-one" @click="topayment">
					<text>线上微信住院押金缴费记录</text>
					<text> > </text>
				</view>
				<view class="text-one" @click="topayment">
					<text>线上微信结算缴费记录</text>
					<text> > </text>
				</view>
				<view class="text-one">
					<text>病例复印记录</text>
					<text> > </text>
				</view>
				<view class="text-one">
					<text>职工挂号记录</text>
					<text> > </text>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: "暂未登录"
			};
		},
		methods: {
			topayment() {
				uni.navigateTo({
					url: "../../pages/PaymentRecords/PaymentRecords"
				})
			},
			toregist(){
				uni.navigateTo({
					url: "../../pages/RegistrationRecord/RegistrationRecord"
				})
			},
			tomylike(){
				uni.navigateTo({
					url:"../Mylike/Mylike"
				})
			}
		}
	}
</script>

<style lang="scss">
	.minebigbox {
		padding: 20px 16px;
		background-color: #f8f8f8;

		.myhome {

			.myhome-logon {
				display: flex;
				justify-content: space-between;

				.logon-name-image {
					display: flex;
					justify-content: space-between;
					width: 120px;

					image {
						width: 50px;
						height: 50px;

					}

					.logon-name {
						height: 50px;
						font-size: 16px;
						font-weight: 600;
						line-height: 50px;
					}
				}

				.tologon {
					height: 50px;
					font-size: 14px;
					line-height: 50px;
					color: #9fa0a2;
				}

			}


			.mylike {
				margin-top: 16px;
				background-color: #ffffff;
				padding: 20px 0;
				border-radius: 8px;
				display: flex;
				justify-content: space-between;

				.mylike-item {
					width: 30%;
					margin: 0 auto;
					text-align: center;

					image {
						width: 50px;
						// display: block;
						height: 50px;


					}

					text {
						font-size: 12px;
						display: block;

					}
				}

			}

			.text-option {
				margin-top: 16px;
				background-color: #ffffff;
				border-radius: 8px;

				.text-one {
					padding: 10px;
					width: 100%;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;

					&>text:nth-child(1) {
						font-size: 14px;

					}

					&>text:nth-child(2) {
						font-size: 20px;
						color: #9fa0a2;
					}
				}
			}

		}

	}
</style>